class HornButton extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });

        shadow.innerHTML = `
            <style>
                :host {
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                }
                button {
                    height: 100%;
                    width: 100%;
                    position: relative;
                    overflow: visible;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                    margin: 0;
                    border: none;
                    background-color: transparent;
                    border-radius: 50%;
                    aspect-ratio: 1;
                    min-width: 30px;
                    min-height: 30px;
                    cursor: pointer;
                    font-size: 16px;
                    transition: transform 0.2s;
                }
                button:active {
                    transform: scale(0.98);
                }
                img {
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                }
                .ripple {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 115%;
                    height: 115%;
                    background: #0B84FF;
                    border-radius: 50%;
                    transform: translate(-50%, -50%) scale(0);
                    animation: ripple-animation 1.5s infinite;
                    pointer-events: none;
                }
                .ripple:nth-child(1) { animation-delay: 0s; }
                .ripple:nth-child(2) { animation-delay: 0.5s; }
                .ripple:nth-child(3) { animation-delay: 1s; }
                @keyframes ripple-animation {
                    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
                    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.5; }
                    70% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
                    90% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }
                    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
                }
            </style>
            <button>
                <div class="ripple-container"></div>
                <img src="../resources/horn.png" />
            </button>
        `;

        const btn = shadow.querySelector('button');
        const rippleContainer = shadow.querySelector('.ripple-container');
        let isSelected = false;

        btn.addEventListener('click', () => {
            isSelected = !isSelected;
            if (isSelected) {
                rippleContainer.innerHTML = '';
                for (let i = 0; i < 3; i++) {
                    const ripple = document.createElement('div');
                    ripple.classList.add('ripple');
                    rippleContainer.appendChild(ripple);
                }
            } else {
                rippleContainer.innerHTML = '';
            }
        });
    }
}

customElements.define('horn-button', HornButton);
